# web端首页优化

因为首页加载资源过多，加上都是使用php进行文件的拼接，有时会文件缺失导致页面报错，所以通过本地打包来解决以上问题。

# 实现思路

首页所请求的资源是根据之前的project.json中写的配置去寻找所有文件，大致可分为语言、基础框架、首页页面三类文件。

现在需要根据依赖文件deps去找出所有的依赖并使用gulp打包。

既然是前端来做，自然是选择用node.js来实现。

大致思路就是根据文件名去找实际文件路径（之前就有的架构），区分js、css、deps、文件夹等几种类型，去递归找到所有依赖文件并记录下来文件路径（gulp打包是输入路径数组）。（实现代码看附件staticFile.js）

然后通过gulp打包（要换webpack的话会影响整套流水线，所以暂时还是使用gulp）。

通过gulp-rev生成hash值做缓存控制，还需要做自动替换首页php中的文件链接，网上翻了下没发现有可以注入php文件的，于是自己动手实现了一个注入插件（这个之前已经发过创新了），原理还是通过识别特殊标识符然后去替换中间的链接内容。

其中遇到打包后css图片路径发生变化，查看后发现都是ext框架的小图片，于是都用打包成base64。

具体代码逻辑可以看附件。

这样做的好处是在编译阶段就将文件打包好，到时直接请求获取就好了，不用php去实时拼接。

而且js文件，应该来说是前端来控制更方便的，现在有这技术环境了自然要改掉以前的架构。

在上述的一通操作后，对首页优化来说其实没起到作用。只是解决了php来拼接导致的问题，不过因为主导权来到了前端，那么就可以开始进行优化了。

首先观察到combine.js，是用来加载首页页面文件的，足足有3M大小，过于庞大。查看project.json发现其中包含了非首页的文件，于是决定去除这些代码。

在打包时加个文件黑名单，过滤掉不需要的（为了不改动project.json），打包出来发现只有438KB了，极大的缩小了文件。然而许多页面却报错了。

主要报错类型有以下几种：

都是缺少依赖文件或者依赖文件的加载顺序导致的，通过笨方法查看所有页面，逐一解决报错，最终解决了。

通过之前写的staticFile.js中暴露的方法直接找出写了css:true却没对应文件的，手动一一比对并删除css:true（主要是没多少个，不需要自动去删除）。

至此，combine.js的优化已经解决

大小变化，3.1M->448K gzip后：810K->149K

体积优化了85%，加载时间缩短了200ms

再看首页加载的文件，发现有jQuery，highCharts以及各种图片。

于是将jQuery，highCharts合入entry.js，

小图片使用base64，

进一步减少首页请求数。

通过上述的一系列操作，加快了首页加载速度。

另外文件交由前端来打包处理，为以后的大重构打下基础。